<template>
  <div class="mine">
    <div class="title">
      <van-nav-bar
        title="个人信息"
        left-text="返回"
        @click-left="onClickLeft"
      />
    </div>
    <div class="head">
      <div class="ava">
        <van-image round width="6rem" height="6rem" :src="userFace" />
        <p class="Cname">{{ username }}</p>
        <p class="Cname">{{ certificationStatus }}</p>
      </div>
      <div class="content">
        <p>电话号码：{{ telephone }}</p>
        <p>银行卡号：{{ bankCard }}</p>
        <p>身份证号：{{ idCard }}</p>
        <p>身份证正面照片：</p>
        <van-image width="200" height="150" :src="idcardPhotoPostive" />
        <p>身份证背面照片：</p>
        <van-image width="200" height="150" :src="idcardPhotoNegative" />
        <p>银行卡照片：</p>
        <van-image width="200" height="150" :src="bankCardPhoto" />
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
import { mapState } from "vuex";
export default {
  data() {
    return {
      username: "",
      balance: "",
      id: "",
      show: false,
      money: 10,
      userFace: "",
      certificationStatus: "",
      telephone: "",
      bankCard: "",
      bankCardPhoto: "",
      idCard: "",
      idcardPhotoNegative: "",
      idcardPhotoPostive: "",
    };
  },
  computed: {
    ...mapState("user", ["token"]),
  },
  methods: {
    async getInfo() {
      let token = localStorage.getItem("token");
      // console.log(token);
      let res = await get("/user/info", { token: token });
      this.username = res.data.data.username;
      this.balance = res.data.data.balance;
      this.id = res.data.data.id;
      this.userFace = res.data.data.userFace;
      this.certificationStatus = res.data.data.certificationStatus;
      this.telephone = res.data.data.telephone;
      this.bankCard = res.data.data.bankCard;
      this.idCard = res.data.data.idCard;
      this.idcardPhotoNegative = res.data.data.idcardPhotoNegative;
      this.idcardPhotoPostive = res.data.data.idcardPhotoPostive;
      this.bankCardPhoto = res.data.data.bankCardPhoto;
      console.log(res);
      // console.log(token);
    },
    onClickLeft(){
        this.$router.go(-1)
    }
  },
  created() {
    this.getInfo();
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  height: 1200px;
  /* background: wheat; */
  background-image: linear-gradient(
    -225deg,
    #69eacb 0%,
    #eaccf8 48%,
    #6654f1 100%
  );
}
.ava {
  margin-left: 39%;
  /* margin-top: 100px; */
  padding-top: 80px;
  height: 150px;
}
.ava p {
  margin-left: 12px;
  margin-bottom: 20px;
}
.content {
  margin-left: 100px;
  margin-top: 50px;
}
</style>